<template>
    <view class="chat-item" :class="{ 'chat-location-me': item.me }">
        <view class="chat-card" :class="{ me: item.me }">
<!--            {{ item.text2 }}-->
            <!-- 默认用法 直接传入md文本即可-->
            <zero-markdown-view :markdown="item.text"></zero-markdown-view>
            <view class="user-report" v-if="!item.me && item.finish">
                <UserReportButton @click="handleReportClick" />
            </view>
        </view>
    </view>
</template>
<script setup lang="ts">
    import UserReportButton from "../UserReportButton/UserReportButton.vue"

    const props = defineProps({
        item: {
            type: Object,
            default: () => ({})
        },
        finish: {
            type: Boolean,
            default: false
        }
    })

    const emit = defineEmits(['reportClick'])

    const handleReportClick = () => {
        emit('reportClick')
    }
</script>
<style lang="less" scoped>
    .chat-item {
        display: flex;

        &.chat-location-me {
            flex-direction: row-reverse;
        }

        .chat-card {
            display: inline-block;
            background-color: #fff;
            border-radius: 12rpx;
            padding: 26rpx 32rpx;
            font-size: 28rpx;
            color: #444444;

            &.me {
                background: linear-gradient(90deg, #4955F9 0%, #3595F1 100%);
                color: #fff;
                border-radius: 26rpx;
                justify-content: end;
                padding: 16rpx 32rpx;
                font-size: 32rpx;
                position: relative;

                &::after {
                    content: '';
                    position: absolute;
                    right: -8rpx;
                    top: 28rpx;
                    width: 0;
                    height: 0;
                    border-top: 12rpx solid transparent;
                    border-bottom: 12rpx solid transparent;
                    border-left: 12rpx solid #3595F1;
                }
            }

            .user-report {
                margin-top: 20rpx;
                display: flex;
                justify-content: start;
            }
        }
    }
</style>
